<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2018/5/21
  Time: 22:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <title>信息管理系统</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <link href="/style/basic_layout.css" rel="stylesheet" type="text/css">
    <link href="/style/common_style.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="/js/jquery/jquery.js"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/jquery.artDialog.js?skin=blue"></script>
    <script type="text/javascript" src="/js/plugins/artDialog/plugins/iframeTools.js"></script>
    <script type="text/javascript" src="/js/plugins/My97DatePicker/WdatePicker.js"></script>
    <script type="text/javascript" src="/js/commonAll.js"></script>
    <script type="text/javascript" src="/js/plugins/jquery-validate/jquery.validate.js"></script>
    <script type="text/javascript" src="/js/jquery/jquery.form.min.js"></script>

    <script>
        $(function () {
            $(".Wdate").click(function () {
                WdatePicker();
            })
        })
    </script>
    <script>
        $(function () {
            $("#edit_table_body").on("click", ".searchproduct", function () {
                var tr = $(this).closest("tr");
                $.dialog.open("/product/selectProductList.do", {
                    title: "选择商品",
                    width: 990,
                    height: 1000,
                    close: function () {
                        //获得传回来的数据
                        var json = $.dialog.data("json");
                        //回显
                        tr.find("[tag=pid]").val(json["id"])
                        tr.find("[tag=name]").val(json["name"])
                        tr.find("[tag=salePrice]").val(json["salePrice"])
                        tr.find("[tag=brand]").text(json["brandName"])

                    }
                }, false)
                //计算金额小鸡
            }).on("change", "[tag=salePrice],[tag=number]", function () {
                var tr = $(this).closest("tr")
                //h获得成本家和数量
                var salePrice = parseFloat(tr.find("[tag=salePrice]").val() || 0);
                var number = parseFloat(tr.find("[tag=number]").val() || 0);
                //使用数量乘以成本价得到金额小鸡
                var amount = number * salePrice;
                //保留两位小数
                //将计算结果设置到页面
                tr.find("[tag=amount]").text(amount.toFixed(2));

            }).on("click", ".removeItem", function () {
                var tr = $(this).closest("tr")
                if ($("#edit_table_body tr").size() > 1) {
                    tr.remove();
                } else {
                    tr.find("[tag=pid]").val("")
                    tr.find("[tag=name]").val("")
                    tr.find("[tag=salePrice]").val("")
                    tr.find("[tag=number]").val("")
                    tr.find("[tag=remark]").val("")

                    tr.find("[tag=brand]").text("")
                    tr.find("[tag=anount]").text("")
                }
            })

            //添加明细
            $(".appendRow").click(function () {
                //获得第一行并克隆
                var tr = $("#edit_table_body tr:first").clone();
                //清空数据
                tr.find("[tag=pid]").val("")
                tr.find("[tag=name]").val("")
                tr.find("[tag=salePrice]").val("")
                tr.find("[tag=number]").val("")
                tr.find("[tag=remark]").val("")

                tr.find("[tag=brand]").text("")
                tr.find("[tag=anount]").text("")

                //最佳到表格中
                tr.appendTo("#edit_table_body");
            })
            $("#editForm").submit(function () {
                var trArray = $("#edit_table_body tr");
                for (var i = 0; i < trArray.size(); i++) {
                    var tr = trArray[i];

                    $(tr).find("[tag=pid]").prop("name", "items[" + i + "].product.id");
                    $(tr).find("[tag=salePrice]").prop("name", "items[" + i + "].salePrice");
                $(tr).find("[tag=number]").prop("name", "items[" + i + "].number");
                $(tr).find("[tag=remark]").prop("name", "items[" + i + "].remark");
            }
        });
        //删除明细
        $("#editForm").ajaxForm(function (data) {
            var dialog = $.dialog({
                title: "提示",
                content: data.msg
            })
                if (data.success) {
                    dialog.button({
                        name: "确定", callback: function () {
                            window.location.href = "/stockOutcomeBill/list.do";
                        }
                    })
                } else {
                    dialog.button({name: "确定"})
                }
            })
        })
    </script>
</head>
<body>
<form name="editForm_stockOutcomeBill" action="/stockOutcomeBill/saveOrUpdate.do" method="post" id="editForm">
    <input type="hidden" name="id" value="${stockOutcomeBill.id}">
    <div id="container">
        <div id="nav_links">
            <span style="color: #1A5CC6;">采购订单编辑</span>
            <div id="page_close">
                <a>
                    <img src="/images/common/page_close.png" width="20" height="20" style="vertical-align: text-top;"/>
                </a>
            </div>
        </div>
        <div class="ui_content">
            <table cellspacing="0" cellpadding="0" width="100%" align="left" border="0">
                <tr>
                    <td class="ui_text_rt" width="140">订单编码</td>
                    <td class="ui_text_lt">
                        <input name="sn" value="${stockOutcomeBill.sn}" class="ui_input_txt02"/>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">仓库</td>
                    <td class="ui_text_lt">
                        <select name="depot.id" class="ui_select01">
                            <c:forEach items="${depots}" var="item">
                                <option value="${item.id}" ${item.id==stockOutcomeBill.depot.id? "selected" : ''}>${item.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">客户</td>
                    <td class="ui_text_lt">
                        <select name="client.id" class="ui_select01">
                            <c:forEach items="${clients}" var="item">
                                <option value="${item.id}" ${item.id==stockOutcomeBill.client.id? "selected" : ''}>${item.name}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>
                <tr>
                    <td class="ui_text_rt" width="140">业务时间</td>
                    <td class="ui_text_lt">
                        <fmt:formatDate value="${stockOutcomeBill.vdate}" pattern="yyyy-MM-dd" var="vdate1"></fmt:formatDate>
                        <input name="vdate" value="${vdate1}"  class="ui_input_txt02 Wdate"/>

                    </td>
                </tr>

                <tr>
                    <td class="ui_text_rt" width="140">单据明细</td>
                </tr>
                <tr>
                    <td></td>
                    <td>
                        <input type="button" value="添加明细" class="ui_input_btn01 appendRow"/>
                        <table class="edit_table" cellspacing="0" cellpadding="0" border="0" style="width: auto">
                            <thead>
                            <tr>
                                <th width="10"></th>
                                <th width="200">货品</th>
                                <th width="120">品牌</th>
                                <th width="80">价格</th>
                                <th width="80">数量</th>
                                <th width="80">金额小计</th>
                                <th width="150">备注</th>
                                <th width="60"></th>
                            </tr>
                            </thead>
                            <tbody id="edit_table_body">
                            <c:choose>
                                <c:when test="${stockOutcomeBill.id==null}">
                                    <tr>
                                        <td></td>
                                        <td>
                                            <input disabled="true" readonly="true" class="ui_input_txt02" tag="name"/>
                                            <img src="/images/common/search.png" class="searchproduct"/>
                                            <input type="hidden" name="items.product.id" tag="pid"/>
                                        </td>
                                        <td><span tag="brand"></span></td>
                                        <td><input tag="salePrice" name="items.salePrice" class="ui_input_txt01"/></td>
                                        <td><input tag="number" name="items.number" class="ui_input_txt01"/></td>
                                        <td><span tag="amount"></span></td>
                                        <td><input tag="remark" name="items.remark" class="ui_input_txt02"/></td>
                                        <td>
                                            <a href="javascript:;" class="removeItem">删除明细</a>
                                        </td>
                                    </tr>
                                </c:when>
                                <c:otherwise>
                                    <c:forEach items="${stockOutcomeBill.items}" var="item">
                                        <tr>
                                            <td></td>
                                            <td>
                                                <input disabled="true" readonly="true" class="ui_input_txt02" tag="name" value="${item.product.name}"/>
                                                <img src="/images/common/search.png" class="searchproduct"/>
                                                <input type="hidden" name="items.product.id" tag="pid" value="${item.product.id}"/>
                                            </td>
                                            <td><span tag="brand">${item.product.brandName}</span></td>
                                            <td><input tag="salePrice" name="items.salePrice" value="${item.salePrice}" class="ui_input_txt01"/></td>
                                            <td><input tag="number" name="items.number" value="${item.number}" class="ui_inputinputinput_txt01"/></td>
                                            <td><span tag="amount">${item.amount}</span></td>
                                            <td><input tag="remark" name="items.remark" class="ui_input_txt02" value="${item.remark}"/></td>
                                            <td>
                                                <a href="javascript:;" class="removeItem">删除明细</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                </c:otherwise>
                            </c:choose>
                            </tbody>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td>&nbsp;</td>
                    <td class="ui_text_lt">
                        &nbsp;<input type="submit" value="确定保存" class="ui_input_btn01 "/>
                        &nbsp;<input id="cancelbutton" type="button" value="重置" class="ui_input_btn01"/>
                    </td>
                </tr>
            </table>
        </div>
    </div>
</form>
</body>
</html>